<template>
	<view>
		
		<loading-plus v-if="beforeReady"></loading-plus>
		
		<!-- 头部 -->
		<view class="position-relative d-flex a-center"
		style="height: 320rpx;">
			<!-- 消息列表 -->
			<view class="" @click="navigate('msg-list')">
				<view class="iconfont icon-xiaoxi position-absolute text-white"
				style="font-size: 50rpx;top: 75rpx;right: 20rpx;z-index: 100;"></view>
			</view>
			
			<image src="../../static/images/bg.jpg" 
			style="height: 320rpx;width: 100%;"></image>
			<view class="d-flex a-center position-absolute left-0 right-0"
			style="bottom: 50rpx;">
				<image src="../../static/images/demo/demo6.jpg" 
				style="height: 145rpx;width: 145rpx;border: 5rpx solid;"
				class="rounded-circle border-light ml-4"></image>
				<navigator url="../login/login">
					<view class="ml-2 text-white font-md">
						<text>强强</text>
					</view>
				</navigator>
				
				<view class="d-flex a-center j-center a-self-end ml-auto px-2"
				style="height: 70rpx;background-color: #FFD43F;color: #CC4A00;border-top-left-radius: 35rpx;border-bottom-left-radius: 35rpx;">
					<view class="line-h iconfont icon-huangguan mr-1"></view>
					<text>会员积分 199</text>
				</view>
			</view>
		</view>
		
		<!-- 图标分类 -->
		<card title="我的订单" headTitleStyle="font-md font-weight" :showheadRight="true">
			<view slot="right" @click="navigate('order')">
				<view class="text-secondary">
					<text>全部订单</text>
					<text class="iconfont icon-you"></text>
				</view>
			</view>
			<view class="d-flex a-center">
				<view class="flex-1 d-flex flex-column a-center j-center py-3"
				v-for="i in 4" :key="i"
				hover-class="bg-light-secondary">
					<view class="iconfont icon-daishouhuo font-lg line-h"></view>
					<view class="font-md">待付款</view>
				</view>
				
			</view>
		</card>
		
		<divider></divider>
		
		<!-- 列表 -->
		<uni-list>
			<uni-list-item :showExtraIcon="true" 
			leftIcon="iconfont icon-VIP"
			leftIconStyle="color:#FDBF2E;"
			title="小米会员"
			:showArrow="true"></uni-list-item>
			<uni-list-item :showExtraIcon="true"
			leftIcon="iconfont icon-huangguan"
			leftIconStyle="color:#FCBE2D"
			title="会员中心"
			:showArrow="true"></uni-list-item>
			<uni-list-item :showExtraIcon="true"
			leftIcon="iconfont icon-service"
			leftIconStyle="color:#FA6C5E"
			title="服务中心"
			:showArrow="true"></uni-list-item>
			<uni-list-item :showExtraIcon="true"
			leftIcon="iconfont icon-home"
			leftIconStyle="color:#DE8B42"
			title="小米之家"
			:showArrow="true"></uni-list-item>
			<uni-list-item :showExtraIcon="true"
			leftIcon="iconfont icon-gengduo"
			leftIconStyle="color:#9ED45A"
			title="用户设置"
			:showArrow="true"
			:clickable="true"
			@click="navigate('user-set')"
			></uni-list-item>
			
			<divider></divider>
			
			<uni-list-item :showExtraIcon="true"
			leftIcon="iconfont icon-icon_set_up"
			leftIconStyle="color:#808C98"
			title="更多设置"
			:showArrow="true"
			:clickable="true"
			@click="navigate('user-path-list')"></uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import card from "@/components/common/card.vue"
	import uniList from "@/components/uni-ui/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-ui/uni-list-item/uni-list-item.vue"
	import loading from "@/common/mixin/loading.js"
	
	export default {
		mixins: [loading],
		components: {
			card,
			uniList,
			uniListItem,
		},
		
		data() {
			return {
				
			}
		},
		methods: {
			navigate(path) {
				if (!path) return 
				uni.navigateTo({
					url: `/pages/${path}/${path}`
				})
			}
		}
	}
</script>

<style>

</style>
